<template>
  <div class="bar flex-column flex-middle">
    <div class="flex-item left" @click="$emit('barClick')">
      <div class="flex-column flex-right flex-middle" style="font-size:24rpx;">
        合计：<span class="price"><span style="font-size:28rpx;">￥</span> {{price}}</span>
      </div>
    </div>
    <div class="right">
      <button style="border:none!important;border-radius:0!important;" @click="!loading && $emit('submit')" :class="{'zan-btn':true, 'zan-btn--loading':loading, 'zan-btn--danger':true, 'zan-btn--disabled':disabled}">{{buttontext}}</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // key: value
      }
    },
    props: {
      'buttontext': {
        type: String,
        default: '结算'
      },
      price: {
        type: Number,
        default: 0,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      loading: {
        type: Boolean,
        default: false,
      }
    },
  }
</script>

<style scoped>
.bar {
  box-shadow: 0 -1px 20px rgba(0,0,0,.1);
  position: fixed;
  z-index: 9998;
  left: 0;
  bottom: 0;
  height: 45px;
  width: 100vw;
  background: #fff;
}
.left {
  color:#555;
  font-weight:500;
}
.price {
  color:#f44;
  font-size:18px;
  padding-right:12px;
}
.right {
  width: 110px;
  height: 100%;
  /* background:  */
}
</style>

